<template>
  <div class="popup-page">
    <div class="group">
      <el-input v-model="nodeName" placeholder="请输入内容" />
    </div>
    <div class="group">
      <div class="value">
        <span
          v-for="item of applist"
          :key="item.value"
          class="app-list"
          @click="chooseApproval(item, 1)"
        >
          <Icon
            v-show="item.checked"
            class="ver-mid"
            color="#00a0ed"
            name="circle-check"
          />
          <Icon
            v-show="!item.checked"
            class="ver-mid"
            color="#999"
            name="circle"
          />
          <span class="ver-mid">{{ item.name }}</span>
        </span>
      </div>
    </div>

    <div v-if="checkone == '0'" class="group">
      <div>
        <el-button type="primary" @click="addlist">添加成员</el-button>
      </div>
      <div class="value">
        <el-tag
          v-for="tag in members"
          :key="tag.UserId"
          closable
          :type="tag.UserId"
          @close="Close(tag)"
        >
          {{ tag.RealName }}
        </el-tag>
      </div>
    </div>
    <div class="mask-pop-p">
      <div class="title">当前层级无指定负责人时</div>
      <div>
        <el-checkbox v-model="checkup">
          当前层级无部门负责人时，由上一级部门负责人审批
        </el-checkbox>
      </div>
      <div>
        <el-checkbox v-model="checkno">
          此审批节点为空时直接跳过，不视为异常
        </el-checkbox>
      </div>
    </div>
    <div class="mask-pop-p">
      <div class="title">同时有多个部门负责人或多个指定成员时</div>
      <div class="mask-pop-check" @click="chooseApproval(isone, 3)">
        <Icon
          v-show="isone"
          class="ver-mid"
          color="#00a0ed"
          name="circle-check"
        />
        <Icon v-show="!isone" class="ver-mid" color="#999" name="circle" />
        <span class="ver-mid">会签（一名部门负责人同意即可）</span>
      </div>
      <div class="mask-pop-check" @click="chooseApproval(ismore, 4)">
        <Icon
          v-show="ismore"
          class="ver-mid"
          color="#00a0ed"
          name="circle-check"
        />
        <Icon v-show="!ismore" class="ver-mid" color="#999" name="circle" />
        <span class="ver-mid">或签（须所有同层级负责人同意）</span>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    :modal="false"
    title="人员列表"
    width="20%"
  >
    <choose-personnel @on-surefn="onSureFn" />
  </el-dialog>
  <div class="bottom">
    <span class="btn" @click="onCancel">取消</span>
    <span class="btn enter" @click="onEnter">确定</span>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  import { Icon } from 'approval-flow'
  import choosePersonnel from './choose-personnel.vue'
  export default defineComponent({
    components: { Icon, choosePersonnel },
    props: {
      nodeData: {
        type: Object,
        default: () => {
          return {}
        },
      },
      conditionsData: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    emits: ['on-enter', 'on-cancel'],
    setup(props, { emit }) {
      const state = reactive({
        ClipboardName: '',
        nodeName: '',
        showedit: false,
        checkone: '0',
        ismore: true,
        isone: false,
        checkup: true,
        checkno: false,
        dialogVisible: false,
        applist: [
          { name: '指定成员', value: '0' },
          // { name: '直属领导', value: '1' },
          { name: '申请人本人', value: '2' },
          { name: '部门负责人', value: '3' },
        ],
        members: [],
        nodeDatalist: {},
      })
      const $baseMessage = inject('$baseMessage')
      state.nodeDatalist = props.nodeData ? props.nodeData : {}
      state.ClipboardName = props.nodeData.name || ''
      state.nodeName = props.nodeData.inputname || ''
      state.checkone = props.nodeData.properties?.approvalType?.value || '0'
      state.members = props.nodeData.properties?.member || []
      if (props.nodeData.properties?.approvalType?.value) {
        state.applist.map((item) => {
          if (props.nodeData.properties?.approvalType?.value === item.value) {
            item.checked = true
          }
        })
      } else {
        state.applist[0].checked = true
      }
      const onEnter = () => {
        if (!state.nodeName) {
          $baseMessage('nodeName不可以为空', 'error')
          return
        }
        state.nodeDatalist.nodeName = ''
        state.popupshow = false
        state.nodeDatalist.name = state.ClipboardName
        state.nodeDatalist.inputname = state.nodeName
        state.applist.map((item) => {
          if (item.checked && item.value != '0') {
            state.nodeDatalist.nodeName = `${state.nodeName}(${item.name})`
          }
          if (item.value == '0') {
            state.nodeDatalist.properties.member = state.members
          }
        })
        if (
          state.nodeDatalist.properties.member.length > 0 &&
          state.checkone === '0'
        ) {
          state.nodeDatalist.properties.member.map((item, index) => {
            if (index < state.nodeDatalist.properties.member.length) {
              state.nodeDatalist.nodeName += `${item.RealName}、`
            } else {
              state.nodeDatalist.nodeName += `${item.RealName}`
            }
          })
        }
        state.nodeDatalist.nodeName = state.nodeDatalist.nodeName.substring(
          0,
          state.nodeDatalist.nodeName.length - 1
        )
        console.log(state.nodeDatalist.nodeName)
        state.nodeDatalist.properties.approvalType =
          state.applist.find((item) => item.checked) || ''
        // 覆盖nodeName,
        emit('on-enter', state.nodeDatalist)
      }
      const onCancel = () => {
        emit('on-cancel')
      }
      const onSureFn = (data) => {
        state.dialogVisible = false
        state.members = data ? data : []
        console.log(data)
      }
      const chooseApproval = (item, type) => {
        if (type == 1) state.applist.forEach((item) => (item.checked = false))
        if (type != 3 && type != 4) item.checked = !item.checked
        if (type == 1) state.checkone = item.value
        if (type == 3) {
          state.ismore = false
          state.isone = true
        }
        if (type == 4) {
          state.isone = false
          state.ismore = true
        }
      }
      const addlist = () => {
        state.dialogVisible = true
      }
      const Close = (tag) => {
        state.members.splice(state.members.indexOf(tag), 1)
      }
      return {
        ...toRefs(state),
        onEnter,
        onCancel,
        chooseApproval,
        addlist,
        onSureFn,
        Close,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .ver-mid {
    vertical-align: middle;
    display: inline-block;
  }
  .app-list {
    margin-right: 20px;
    cursor: pointer;
    display: inline-block;
  }
  .group {
    display: flex;
    margin-bottom: 10px;
    line-height: 32px;
    .key {
      width: 100px;
      text-align: right;
    }
    .value {
      flex: 1;
      margin-left: 10px;
    }
  }
  .popup-page {
    min-height: 80%;
    padding-bottom: 70px;
    box-sizing: border-box;
    padding: 20px;
    input,
    select {
      height: 30px;
      width: 200px;
      line-height: 30px;
      border: 1px solid #d8d8d8;
      border-radius: 7px;
      outline: none;
      margin-left: 10px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 70px;
    text-align: left;
    .btn {
      display: inline-block;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #333;
      border: 1px solid #d8d8d8;
      cursor: pointer;
      margin: 0 10px;
      &.enter {
        background: #00a0ed;
        color: #fff;
        border-color: #00a0ed;
      }
    }
  }

  .mask-pop-p {
    margin-top: 20px;
    .title {
      line-height: 32px;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
    .mask-pop-check {
      padding: 10px 0;
    }
  }
</style>
